<template>
  <!-- box核心内容区域开始 -->
  <div class="box w">
    <div class="box-hd">
      <h3>精品推荐</h3>
      <a href="#">查看全部</a>
    </div>
    <div class="box-bd">
      <ul class="clearfix">
        <Xuecheng
          v-for="(item,index) in data"
          :key="index"
          :obj="item"
        />
      </ul>
    </div>
  </div>
</template>

<script>
import Xuecheng from "./components/01-xuechengzaixian.vue";
export default {
  data() {
    return {
      data: [
        {
          src: require("./assets/course01.png"),
          title: "Think PHP 5.0 博客系统实战项目演练",
          num: 1125,
        },
        {
          src: require("./assets/course02.png"),
          title: "Android 网络动态图片加载实战",
          num: 357,
        },
        {
          src: require("./assets/course03.png"),
          title: "Angular2 大前端商城实战项目演练",
          num: 22250,
        },
        {
          src: require("./assets/course04.png"),
          title: "Android APP 实战项目演练",
          num: 389,
        },
        {
          src: require("./assets/course05.png"),
          title: "UGUI 源码深度分析案例",
          num: 124,
        },
        {
          src: require("./assets/course06.png"),
          title: "Kami2首页界面切换效果实战演练",
          num: 432,
        },
        {
          src: require("./assets/course07.png"),
          title: "UNITY 从入门到精通实战案例",
          num: 888,
        },
        {
          src: require("./assets/course08.png"),
          title: "Cocos 深度学习你不会错过的实战",
          num: 590,
        },
      ],
    };
  },
  components: {
    Xuecheng,
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
.w {
  width: 1200px;
  margin: auto;
}
body {
  background-color: #f3f5f7;
}
li {
  list-style: none;
}
a {
  text-decoration: none;
}
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}

.box {
  margin-top: 30px;
}
.box-hd {
  height: 45px;
}
.box-hd h3 {
  float: left;
  font-size: 20px;
  color: #494949;
}
.box-hd a {
  float: right;
  font-size: 12px;
  color: #a5a5a5;
  margin-top: 10px;
  margin-right: 30px;
}
/* 把li 的父亲ul 修改的足够宽一行能装开5个盒子就不会换行了 */
.box-bd ul {
  width: 1225px;
}
.box-bd ul li {
  position: relative;
  top: 0;
  float: left;
  width: 228px;
  height: 270px;
  background-color: #fff;
  margin-right: 15px;
  margin-bottom: 15px;
  transition: all 0.3s;
}
.box-bd ul li a {
  display: block;
}
.box-bd ul li:hover {
  top: -8px;
  box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
}
.box-bd ul li img {
  width: 100%;
}
.box-bd ul li h4 {
  margin: 20px 20px 20px 25px;
  font-size: 14px;
  color: #050505;
  font-weight: 400;
}
.box-bd .info {
  margin: 0 20px 0 25px;
  font-size: 12px;
  color: #999;
}
.box-bd .info span {
  color: #ff7c2d;
}
</style>